<template>
  <div class="createCource">
    <incrementCourse @addList="addList" v-if="isShowCreateSource" @close="close('isShowCreateSource')" :isShowCreateSource="isShowCreateSource" />
    <selectSchoolSource :sourceList="sourceList" @addList="addList" v-if="isShowSelectSource" @close="close('isShowSelectSource')" :isShowSelectSource="isShowSelectSource" />
    <div class="course-top">
      <div class="top-left">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>智慧体育课堂</el-breadcrumb-item>
          <el-breadcrumb-item>创建体育课</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div @click="back" class="top-right">
        返回
      </div>
    </div>
    <div class="course-form">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="8vw" class="demo-ruleForm">
        <el-form-item label="上课时间" prop="dateTime">
          <el-date-picker
            size="small"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
            v-model="ruleForm.dateTime"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>

        </el-form-item>
        <el-form-item label="上课时间段" prop="timeList">
          <el-time-picker
            size="small"
            value-format="HH:mm:ss"
            is-range
            v-model="ruleForm.timeList"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"
          >
          </el-time-picker>

        </el-form-item>
        <el-form-item label="上课班级" prop="classId">
          <el-radio-group v-model="ruleForm.classId">
            <el-radio v-for="item in classList" :key="item.classId" :label="item.classId" :value="item.classId">{{item.allName}}{{'('+item.stuCount+'人)'}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备课资源" prop="source">
          <div class="source">
            <div class="top-source">
              <div class="source-my"  @click="isShowCreateSource = true">上传我的资源</div>
              <div class="source-school" @click="isShowSelectSource = true">选择校本资源</div>
            </div>
            <div class="source-list">
                <div class="source-val" v-for="(item,index) in sourceList" :key="index">
                  <div class="parent">
                    <div class="val-icon">
                      <i v-if="item.type == 1" class="iconfont icon-shipin2"></i>
                      <i v-if="item.type == 0" class="iconfont icon-tupian"></i>
                    </div>
                    <div class="val-text">
                      {{item.fileName}}
                    </div>
                  </div>
                  <div class="val-del" @click="delSource(item)">
                    删除
                  </div>
                </div>
            </div>
          </div>
        </el-form-item>

        <el-form-item>
          <el-button style="margin-left: 20vw" @click="resetForm('ruleForm')">重置</el-button>
          <el-button style="margin-top:5vh" type="primary" @click="submitForm('ruleForm')">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import incrementCourse from "@/views/layoutHeader/createCourse/component/incrementCourse";
import selectSchoolSource from "@/views/layoutHeader/createCourse/component/selectSchoolSource";
import {getClassListSize,createCourse} from "@/api/course";
export default {
  data() {

    return {
      ruleForm: {
        dateTime:"",
        timeList:null,
        classId:"",
        imageUrls:[],
        courseId:""
      },
      sourceList:[],
      classList:[],
      rules: {

        classId: [
          { required: true, message: '请选择上课班级', trigger: 'change' },
        ],
        dateTime:[
          { required: true, message:"请选择上课时间",trigger: "change" },
        ],
        timeList:[
          { required: true, message:"请选择上课时间段",trigger: "change" },
        ]
      },
      pickerOptions: {
        disabledDate(time) {
          const today = new Date().setHours(0, 0, 0, 0); // 获取今天的日期，不包括时间部分
          const selected = new Date(time).setHours(0, 0, 0, 0); // 获取选中日期，不包括时间部分
          return selected < today; // 判断选中日期是否小于今天
        },
      },
      isShowCreateSource:false,
      isShowSelectSource:false,
    };
  },
  created() {
    this.getClassList()
    this.initSource()
  },
  methods: {
    delSource(item){
      this.sourceList = this.sourceList.filter(val=>val.srcId !== item.srcId)
    },
    initSource(){
      // parseUrl
     if(this.$route.query.item){
       let urlSource = JSON.parse(this.$route.query.item);
       if(urlSource){
         this.ruleForm = {
           dateTime: urlSource.dateTime,
           timeList: [urlSource.startTime,urlSource.endTime],
           classId: urlSource.classId,
           courseId:urlSource.courseId
         }
         let keys = Object.keys(urlSource.imagefile)
         this.sourceList = keys.map(item => urlSource.imagefile[item])
       }
     }
    },
    addList(e){
      let allArr = [...this.sourceList,...e];
      const uniqueArr = allArr.reduce((unique, item) => {
        const existingItem = unique.find(i => i.srcId === item.srcId);
        if (!existingItem) {
          unique.push(item);
        }
        return unique;
      }, []);
      this.sourceList = uniqueArr
    },
    getClassList(){
      getClassListSize({
        teacherId:this.$store.state.user.USER_INFO.id
      }).then(response=>{
        console.log(response);
        if(response.code == 200){
          this.classList = response.result
        }
      })
    },
    close(key){
      this[key] = false;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let className = this.classList.filter(item=>item.classId == this.ruleForm.classId)[0].allName+'('+this.classList.filter(item=>item.classId == this.ruleForm.classId)[0].stuCount+'人)';
          let data = {
            courseId:this.ruleForm.courseId ? this.ruleForm.courseId : "",
            dateTime:this.ruleForm.dateTime,
            startTime:this.ruleForm.timeList[0],
            endTime:this.ruleForm.timeList[1],
            classId:this.ruleForm.classId,
            imageUrls:this.sourceList.map(item=>item.srcId),
            createId:this.$store.state.user.USER_INFO.id,
            className
          }
          console.log(data,"data")
          createCourse(data).then(response=>{
            console.log(response,"添加响应");
            if(response.code == 200){
              this.$message.success("添加成功");
              this.back();
            }else{
              this.$message.error(response.message);
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.sourceList = []
      this.ruleForm = {
        dateTime:"",
        timeList:null,
        classId:"",
        imageUrls:[],
        courseId: this.ruleForm.courseId ? this.ruleForm.courseId : ""
      }
      this.$refs[formName].resetFields();
    },
    back(){
      this.$router.back()
    }
  },
  components:{
    incrementCourse,
    selectSchoolSource
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-input__inner {
  text-align: center;
}
::v-deep .el-radio-group {
  display: flex;
  flex-wrap: wrap;

}
::v-deep .el-radio{
  width: 31% !important;
  white-space: nowrap;     /* 防止换行 */
  text-overflow: ellipsis; /* 使用省略号来表示被隐藏的内容 */
  margin-top: 1% 0 !important;
  overflow: hidden;
}
  .createCource {
    width: 80vw;
    margin: auto;

    .course-top {
      display: flex;
      justify-content: space-between;
      padding: 1vh 0;
      ::v-deep .el-breadcrumb__inner {
        font-size: 1vw;

      }
      .top-right {
        font-size: 1vw ;
        color: #1677FF;
      }
    }
    .course-form {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 80vh;
      background: #fff;
      padding: 10vh 15vw 0;
      ::v-deep .el-radio {
        margin: 10px;
        margin-left: 0;
      }
      .source {
        display: flex;
        flex-direction: column;
          .top-source {
              display: flex;
              .source-my {
                font-size: .8vw;
                color: #1677FF;
                cursor: pointer;
              }
              .source-school {
                font-size: .8vw;
                color: #1677FF;
                margin-left: 2vw;
                cursor: pointer;
              }
          }
        .source-list{
          max-height: 12vh;
          min-height: 12vh;
          overflow-y: auto;
          width: 80%;
        }
        .source-val {
          display: flex;
          width: 100%;
          align-items: center;
          justify-content: space-between;
          padding: .5vh .5vw;
          background: #ECF4FF;
          .parent {
            display: flex;
          }
          .val-icon {
            color: #1677FF;
            i{
              font-size: 1.3vw;
            }
          }
          .val-text {
            color: #666666;
            margin-left: .2vw;
            font-size: .8vw;
          }
          .val-del {
            color: #FF6162;
            font-size: .7vw;
          }
        }
      }
    }
  }
</style>
